<!DOCTYPE html>
<meta charset="UTF-8">
<title>下拉</title>
<link rel="import" href="../../common/layout.html">

<style>
	.group {
		display: flex;
	}
	.group + .group {
		margin-top: 1em;
	}
	.demo {
		flex: 1;
		margin: .5em;
	}
</style>

<main ng-app="demoApp" ng-controller="DemoCtrl as ctrl">
	<div class="group">
		<div class="demo">
			<h3>单选</h3>
			<div style="margin: 0.5em 0;">
				<button class="btn-ok" ng-click="ctrl.toggleOpen()">切换打开/关闭状态</button>
			</div>
			<span>当前值: <span ng-bind="ctrl.value1 | json"></span></span>
			<cc-dropdown-select
					placeholder="哈哈哈"
					model="ctrl.value1"
					is-open="ctrl.isOpen"
					datalist="ctrl.datalist2"
					mapping="ctrl.fieldsMap"
					on-select-change="ctrl.selectChange(model, oldModel)"
					on-dropdown-open="ctrl.dropdownOpen()"
					on-dropdown-close="ctrl.dropdownClose()">
			</cc-dropdown-select>
			<div style="margin: 0.5em 0;">
				<button class="btn-ok" ng-click="ctrl.value1 = '深圳'">选择深圳</button>
			</div>
		</div>
		<div class="demo">
			<h3>单选（只读）</h3>
			<span>当前值: <span ng-bind="ctrl.value1 | json"></span></span>
			<cc-dropdown-select ng-init="ctrl.disabled = true"
					disabled="ctrl.disabled"
					placeholder="哈哈哈"
					model="ctrl.value1"
					datalist="ctrl.datalist2"
					mapping="ctrl.fieldsMap">
			</cc-dropdown-select>
			<div style="margin: 0.5em 0;">
				<button class="btn-ok" ng-click="ctrl.disabled = !ctrl.disabled">切换 disabled 状态</button>
			</div>
		</div>
		<div class="demo">
			<h3>单选（可搜索）</h3>
			<span>当前值: <span ng-bind="ctrl.value2 | json"></span></span>
			<cc-dropdown-select
					placeholder="快，快选我。。啊！"
					model="ctrl.value2"
					datalist="ctrl.datalist1"
					searchable="true"
					mapping="ctrl.fieldsMap">
			</cc-dropdown-select>
			<div style="margin: 0.5em 0;">
				<input style="width: 50%;" ng-model="newValue">
				<button class="btn-ok" ng-click="ctrl.setValue(newValue)">设置新值</button>
			</div>
		</div>
	</div>
	<div class="group">
		<div class="demo">
			<h3>多选</h3>
			<span>当前值: <span ng-bind="ctrl.value3 | json"></span></span>
			<cc-dropdown-multiselect
					placeholder="快，快选我。。啊！"
					model="ctrl.value3"
					datalist="ctrl.datalist1"
					mapping="ctrl.fieldsMap"
					on-dropdown-open="ctrl.dropdownOpen()"
					on-dropdown-close="ctrl.dropdownClose()">
			</cc-dropdown-multiselect>
		</div>
		<div class="demo">
			<h3>多选（可搜索）</h3>
			<span>当前值: <span ng-bind="ctrl.value4 | json"></span></span>
			<cc-dropdown-multiselect
					placeholder="快，快选我。。啊！"
					model="ctrl.value4"
					datalist="ctrl.datalist1"
					searchable="true"
					confirm-button="true"
					mapping="ctrl.fieldsMap">
			</cc-dropdown-multiselect>
			<div style="margin: 0.5em 0;">
				<button class="btn-ok" ng-click="ctrl.setList()">设置新值</button>
			</div>
		</div>
	</div>
	<div class="group">
		<div class="demo">
			<h3>单选（带icon）</h3>
			<span>当前值: {{ctrl.value5}}</span>
			<cc-dropdown-select
					placeholder="我默认"
					model="ctrl.value5"
					datalist="ctrl.datalist5"
					searchable="true"
					mapping="ctrl.fieldsMap"
			>
			</cc-dropdown-select>
		</div>
	</div>
</main>

<script src="/components.js"></script>
<script>
	angular.module('demoApp', ['ccms.components'])
		.controller('DemoCtrl', function() {
			this.value1 = '上海';
			this.value2 = null;
			this.value3 = [];
			this.value4 = ['xa', 'sh'];
			this.value5 = '上海';
			this.datalist1 = [
				{title: '北京', value: 'bj'},
				{title: '上海', value: 'sh'},
				{title: '123789', value: 123789},
				{title: '123456', value: 123456},
				{title: '深圳', value: 'sz'},
				{title: '西安', value: 'xa'},
				{title: '南京', value: 'nj'},
				{title: '武汉', value: 'wh'},
				{title: '重庆', value: 'cq'},
				{title: '广州', value: 'gz'}
			];
			this.datalist5 = [
				{title: '北京', value: 'bj', icon: 'icon-phone'},
				{title: '上海', value: 'sh', icon: 'icon-phone'},
				{title: '123789', value: 123789, icon: 'icon-phone'},
				{title: '123456', value: 123456, icon: 'icon-phone'},
				{title: '深圳', value: 'sz', icon: 'icon-phone'},
				{title: '西安', value: 'xa', icon: 'icon-phone'},
				{title: '南京', value: 'nj', icon: 'icon-phone'},
				{title: '武汉', value: 'wh', icon: 'icon-phone'},
				{title: '重庆', value: 'cq', icon: 'icon-phone'},
				{title: '广州', value: 'gz', icon: 'icon-phone'}
			];
			this.setValue = function(newValue) {
				this.value2 = newValue;
			};
			this.setList = function() {
				this.value4 = ['nj', 'sh'];
			};

			this.isOpen = false;
			this.toggleOpen = function() {
				this.isOpen = !this.isOpen;
			};

			this.selectChange = function(newValue, oldValue) {
				console.log('on-select-change:', newValue, oldValue);
			};

			this.dropdownOpen = function() {
				console.log('on-dropdown-open');
			};

			this.dropdownClose = function() {
				console.log('on-dropdown-close');
			};

			this.datalist2 = ['北京', '上海', '深圳', '广州'];
			this.fieldsMap = {
				valueField: 'value',
				displayField: 'title',
				iconField: 'icon'
			};
		});
</script>

